<template>
  <div class="debug-page">
    <h1>API调试页面</h1>
    
    <div class="debug-section">
      <h2>API测试</h2>
      <div class="button-group">
        <el-button @click="testApi" :loading="loading">测试队列API</el-button>
        <el-button @click="testRegister" :loading="registerLoading" type="primary">一键测试注册</el-button>
      </div>
      
      <div v-if="testData" class="test-data">
        <h3>测试数据:</h3>
        <pre>{{ JSON.stringify(testData, null, 2) }}</pre>
      </div>
      
      <div v-if="results.length > 0" class="results">
        <h3>测试结果:</h3>
        <div v-for="(result, index) in results" :key="index" class="result-item">
          <h4 :class="{ 'success': result.success, 'error': !result.success }">
            {{ result.name }}
            <el-tag :type="result.success ? 'success' : 'danger'" size="small">
              {{ result.success ? '成功' : '失败' }}
            </el-tag>
          </h4>
          <pre>{{ JSON.stringify(result.data, null, 2) }}</pre>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import api from '../utils/api'

export default {
  name: 'Debug',
  setup() {
    const loading = ref(false)
    const registerLoading = ref(false)
    const results = ref([])
    const testData = ref(null)
    
    const testApi = async () => {
      loading.value = true
      results.value = []
      
      const tests = [
        { name: '队列状态', method: () => api.getQueueStatus() },
        { name: '待确认用户', method: () => api.getPendingUsers() },
        { name: '已确认用户', method: () => api.getConfirmedUsers() },
        { name: '统计信息', method: () => api.getQueueStatistics() }
      ]
      
      for (const test of tests) {
        try {
          console.log(`测试: ${test.name}`)
          const response = await test.method()
          results.value.push({
            name: test.name,
            data: response.data,
            success: true
          })
        } catch (error) {
          console.error(`测试失败: ${test.name}`, error)
          results.value.push({
            name: test.name,
            data: { error: error.message, response: error.response?.data },
            success: false
          })
        }
      }
      
      loading.value = false
    }
    
    const testRegister = async () => {
      registerLoading.value = true
      results.value = []
      
      // 测试注册请求数据（使用通用测试数据）
      const registerData = {
        anrede: "Herr",
        first_name: "Test",
        last_name: "User",
        email: "test@example.com",
        phone: "01234567890",
        birthday: "01.01.1990",
        service: "学生签",
        address: "Test Address, 123",
        zip_code: "47057",
        dateRange: ["2025-01-01"]
      }
      
      // 显示测试数据
      testData.value = registerData
      
      try {
        console.log('测试注册接口:', registerData)
        const response = await api.register(registerData)
        results.value.push({
          name: '用户注册测试',
          data: response.data,
          success: true
        })
        
        // 如果注册成功，测试获取状态
        if (response.data.success && response.data.request_id) {
          try {
            const statusResponse = await api.getStatus(response.data.request_id)
            results.value.push({
              name: '获取申请状态',
              data: statusResponse.data,
              success: true
            })
          } catch (error) {
            results.value.push({
              name: '获取申请状态',
              data: { error: error.message, response: error.response?.data },
              success: false
            })
          }
        }
      } catch (error) {
        console.error('注册测试失败:', error)
        results.value.push({
          name: '用户注册测试',
          data: { error: error.message, response: error.response?.data },
          success: false
        })
      }
      
      registerLoading.value = false
    }
    
    return {
      loading,
      registerLoading,
      results,
      testData,
      testApi,
      testRegister
    }
  }
}
</script>

<style scoped>
.debug-page {
  padding: 20px;
}

.debug-section {
  margin-bottom: 30px;
}

.button-group {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.test-data {
  margin: 20px 0;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #409eff;
}

.test-data h3 {
  margin: 0 0 10px 0;
  color: #409eff;
}

.test-data pre {
  background: #fff;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
  font-size: 12px;
  overflow-x: auto;
}

.results {
  margin-top: 20px;
}

.result-item {
  margin-bottom: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #e4e7ed;
}

.result-item h4 {
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.result-item h4.success {
  color: #67c23a;
}

.result-item h4.error {
  color: #f56c6c;
}

.result-item pre {
  background: #fff;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
  font-size: 12px;
  overflow-x: auto;
  margin: 0;
}


pre {
  background: #f5f5f5;
  padding: 10px;
  border-radius: 3px;
  overflow-x: auto;
  font-size: 12px;
}
</style>
